let severlist = document.querySelector(".fourbtn");
let apilistOne = document.querySelector(".tenbtn-1");
let apilistTwo = document.querySelector(".tenbtn-2");
let apimaster = document.querySelector(".apimasterlist");
let objArr = [{src:"./imgs/service01.svg",title:"API私有化服务",text:"可部署本地&专有云的Web API",tid:1},{src:"./imgs/service02.svg",title:"源码云检测",text:"实时代码托管，威胁情报监控",tid:2},{src:"./imgs/service03.svg",title:"源码有赢",text:"一站式营销活动服务平台",tid:3},{src:"./imgs/service04.svg",title:"YuanMa API",text:"API开发者协作平台",tid:4}];
let objArr2 = [{src:"./imgs/api01.svg",isclick:"./imgs/api01-c.svg",text:"生活服务",tid:1},
{src:"./imgs/api02.svg",isclick:"./imgs/api02-c.svg",text:"金融科技",tid:2},
{src:"./imgs/api03.svg",isclick:"./imgs/api03-c.svg",text:"交通地理",tid:3},
{src:"./imgs/api04.svg",isclick:"./imgs/api04-c.svg",text:"充值缴费",tid:4},
{src:"./imgs/api05.svg",isclick:"./imgs/api05-c.svg",text:"数据智能",tid:5},
{src:"./imgs/api06.svg",isclick:"./imgs/api06-c.svg",text:"企业工商",tid:6},
{src:"./imgs/api07.svg",isclick:"./imgs/api07-c.svg",text:"应用开发",tid:7},
{src:"./imgs/api08.svg",isclick:"./imgs/api08-c.svg",text:"电子商务",tid:8},
{src:"./imgs/apic1.svg",isclick:"./imgs/apic1-c.svg",text:"吃喝玩乐",tid:9},
{src:"./imgs/apic2.svg",isclick:"./imgs/apic2-c.svg",text:"文娱视频",tid:10}];

let objArr3 = [{src:"./imgs/master-item-icon-01.svg",title:"API智能接入",text:"通过可视化界面配置，即可实现无代码、免开发快速接入",tid:1},
{src:"./imgs/master-item-icon-02.svg",title:"数据库生成API",text:"无代码配置的方式将主流数据路输出为微服务API接口",tid:2},
{src:"./imgs/master-item-icon-03.svg",title:"API智能构建",text:"多个API通过可视化的流程编排与业务逻辑重组,融合成新的API",tid:3},
{src:"./imgs/master-item-icon-04.svg",title:"API智能路由",text:"根据入参属性进行智能分配，实现路由管理，控制API调用流向",tid:4},
{src:"./imgs/master-item-icon-05.svg",title:"简化API开发",text:"助理开发者创建API、批量测试、跟踪开发、自动生成文档",tid:5},
{src:"./imgs/master-item-icon-06.svg",title:"API开发共享",text:"将核心能力以外形式对外输出，赋能到多领域，多场景的应用程序中",tid:6}]
        // arr.forEach((item,index)=>{
        //     item.style.width = '240px';
        //     item.style.height = '283px';
        //     //item.style.background = '#f00';
        //     item.style.background = `ulr(${imgArr[index]}) center`;
        //     console.dir(imgArr[index])
        // });       
new Swiper ('.swiper', {
    //direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
    el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
    },
    
    // // 如果需要滚动条
    // scrollbar: {
    // el: '.swiper-scrollbar',
    // },
});

for(let i = 0;i < objArr.length; i++){
    let img = document.createElement('img');
    let div = document.createElement('div');
    let h1 = document.createElement('h1');
    let h5 = document.createElement('h5');
    let a = document.createElement('a');
    h1.innerText = objArr[i].title;
    h5.innerText = objArr[i].text;
    img.src = objArr[i].src ;
    a.href = '#';
    a.innerText = '去搜索';
    div.appendChild(img);
    div.appendChild(h1);
    div.appendChild(h5);
    div.appendChild(a);
    severlist.appendChild(div);
};

for(let i = 0; i < objArr2.length; i++){
    let div = document.createElement('div');
    let img = document.createElement('img');
    let h5 = document.createElement('h5');
    if(i >4){
        img.src = objArr2[i].src;
        h5.innerText = objArr2[i].text;
        div.setAttribute('tid',objArr2[i].tid);
        div.append(img);
        div.append(h5);
        apilistTwo.appendChild(div);
        this.nodelister(div,objArr2[i]);
    }else{
        img.src = objArr2[i].src;
        h5.innerText = objArr2[i].text;
        div.append(img);
        div.append(h5);
        div.setAttribute('tid',objArr2[i].tid);
        apilistOne.appendChild(div);
        this.nodelister(div,objArr2[i]);
    }
   
};

for(let i = 0 ; i < objArr3.length; i++){
    let div = document.createElement("div");
    let img = document.createElement("img");
    let h1 = document.createElement("h1");
    let h5 = document.createElement("h5");
    let blueDiv = document.createElement('div');
    img.src = objArr3[i].src;
    h1.innerText = objArr3[i].title;
    h5.innerText = objArr3[i].text;
    blueDiv.className = 'blue';
    div.className = "line";
    div.setAttribute("tid",objArr3[i].tid);
    div.append(blueDiv);
    div.append(img);
    div.append(h1);
    div.append(h5);
    apimaster.append(div);
}


function nodelister(node,obj){
    node.onmouseover = ()=>{
        node.querySelector('img').src = obj.isclick;
        node.querySelector('h5').style.color = "#fff"
        node.style.background = "#2f7ee9"
    };

    node.onmouseout = ()=>{
        node.querySelector('img').src = obj.src;
        node.querySelector('h5').style.color = "#000000"
        node.style.background = "#fff"
    }

    node.onclick = ()=>{
        console.error(node.getAttribute("tid"))
    }
};



